<template>
  <div class="about-summary">
    <div class="banner">
      <img src="@/assets/images/20200401115954178998.png" alt="" />
    </div>

    <div class="company-info">
      <div class="left-sidebar">
        <h3>公司新闻</h3>
        <ul class="menu">
          <router-link :to="{ path: './dynamics' }">
            <li class="active">公司新闻</li>
          </router-link>
          <router-link :to="{ path: './industry' }">
            <li>行业动态</li>
          </router-link>
        </ul>
        <div class="contact-info">
          <div class="contact-item">
            <img
              src="@/assets/images/202004011028126d577b.png"
              alt="咨询热线"
              class="contact-icon"
            />
          </div>
          <div class="contact-item">
            <img
              src="@/assets/images/20200401105022f62918.png"
              alt="邮箱"
              class="contact-icon"
            />
          </div>
        </div>
      </div>

      <div class="main-content">
        <div class="breadcrumb">
          <h4>公司新闻</h4>
          <div style="display: flex">
            <router-link :to="{ path: '/' }">
              <li class="active">首页</li> </router-link
            >>公司新闻>公司新闻
          </div>
        </div>
        <!-- 新增新闻列表部分 -->
        <div class="news-list">
          <div
            class="news-item"
            v-for="(item, index) in newsList"
            :key="index"
            @click="jumpDetails(index)"
          >
            <div class="news-image">
              <img :src="item.image" :alt="item.title" />
            </div>
            <div class="news-content">
              <p style="font-size: 18px; color: #000">
                <span v-if="item.id == 1"
                  ><i>顶</i><i style="margin-left: 10px">荐</i></span
                >
                {{ item.title }}
              </p>
              <div class="more-link">
                <span class="more-link-text">MORE</span>
                <span class="icon_right">→</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="about_footer">
      <div class="about_content">
        <img
          style="width: 218px; max-width: 100%; border: none"
          src="@/assets/images/b9e0bccf0852678a6b3909f2b414196.jpg"
          alt="图片展示"
        />
        <div>
          <p>官方客服：400-025-0558</p>
          <p>公司主页：www.zhongyanauto.cn</p>
          <p>
            公司地址：江苏省南京市江宁区东山街道松风路20号宏茂大厦10层1001室
          </p>
          <p>苏ICP备2024146572号-2</p>
          <p>Copyright @ VillaGrandis All Rights Reserved</p>
        </div>
        <div style="text-align: center">
          <img
            style="
              display: inline-block;
              margin-bottom: 10px;
              width: 120px;
              max-width: 100%;
              border: none;
            "
            src="@/assets/images/qrcode.png"
            alt=""
          />
          <p>众延微信</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const jumpDetails = (index) => {
  if (index == 2) {
    router.push({
      path: "./dynamicsdetails",
    });
  } else {
    router.push({
      path: "./industrydetails",
      query: { index: index },
    });
  }
};
const newsList = ref([
  {
    id: 1,
    title: "安心汽车延保服务",
    description: "为您的爱车提供全方位的保障...",
    image:
      "https://www.gac-toyota.com.cn/images/guide/warranty/whyWarr-rtpic.jpg",
  },
  {
    id: 2,
    title: "延保期内客户车辆出现故障怎么办？",
    description: "当您的车辆出现问题时，我们提供快速响应服务...",
    image:
      "https://cdn-cloudflare.meidianbang.cn/comdata/70956/202102/20210205163147fcf68a.png",
  },
  {
    id: 3,
    title: "汽车延保该不该买？",
    description: "详细解析汽车延保的优势与必要性...",
    image:
      "https://cdn-cloudflare.meidianbang.cn/comdata/70956/202004/20200412000004fa5ff5.jpg",
  },
]);
</script>
<style scoped lang="scss">
a {
  text-decoration: none;
  color: #333;
}

.about-summary {
  .banner {
    img {
      width: 100%; // 示例样式
      height: auto; // 示例样式
    }
  }

  .company-info {
    display: flex;
    padding: 20px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;

    .left-sidebar {
      width: 250px;
      padding: 20px;
      background: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;

      h3 {
        color: #c66b00;
        font-size: 22px;
        font-weight: 700;
      }

      .menu {
        list-style: none;
        padding: 0;

        li {
          padding: 10px 15px;
          cursor: pointer;
        }
      }

      .contact-info {
        .contact-item {
          display: flex;
          align-items: center;
        }
      }
    }

    .main-content {
      flex: 1;
      padding: 0 30px;
      text-align: center;

      .breadcrumb {
        margin-bottom: 20px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding: 10px;

        h4 {
          color: #333;
          margin: 0;
        }
      }

      .news-list {
        .news-item {
          display: flex;
          padding: 20px;
          background: #fff;
          border-bottom: 1px dashed #ccc;
          align-items: center;

          .news-image {
            margin-right: 20px;
            width: 20%;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.3s ease;
              /* 添加过渡效果 */
            }
          }

          .news-content {
            flex: 1;
            text-align: left;

            i {
              border: 1px solid #e50b1c;
              font-size: 12px;
              padding: 0px 2px;
              color: #e50b1c;
              font-weight: bold;
              -webkit-border-radius: 2px;
              -moz-border-radius: 2px;
              vertical-align: text-top;
            }

            p {
              color: #666;
              margin: 0 0 15px;
              line-height: 1.6;
            }

            .more-link {
              border: 1px solid #ccc;
              border-radius: 2px;
              width: 100px;
              padding: 5px;
              text-align: center;
              font-size: 12px;
              position: relative;
              cursor: pointer;

              .more-link-text {
                color: #999;
                cursor: pointer;

                transition: opacity 0.5s ease;
              }

              .icon_right {
                margin-left: 10px;
                color: #fff;
                background: #000;
                height: 100%;
                opacity: 0;
                padding: 0 5px;
                top: 0;
                right: 0;
                transition: opacity 0.5s ease;
                position: absolute;
                line-height: 28px;
                font-size: 20px;
              }
            }

            .more-link:hover {
              .icon_right {
                opacity: 1;
              }

              .more-link-text {
                margin-right: 20px;
              }
            }
          }
        }

        .news-item:hover {
          img {
            transform: scale(1.2);
            /* 鼠标移入时放大图片 */
          }
        }
      }

      img {
        margin: 0 auto;
        display: inline-block;
      }
    }
  }

  .service-features {
    display: flex;
    // gap: 20px;
    // flex-wrap: wrap;
    font-size: 14px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 20px;

    .feature_flex {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      gap: 30px;
      padding-left: 5%;
      padding-right: 5%;

      .feature-item {
        flex: 1 1 calc(50% - 40px);
        min-width: 200px;
        border-radius: 8px;
        padding: 10px;

        p {
          color: #666;
          line-height: 1.6;
          margin: 0;
        }
      }
    }
  }
}

.about_footer {
  width: 100%;
  height: auto;
  background: rgb(14, 34, 95);

  .about_content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    font-size: 14px;
    padding: 20px 0;

    p {
      margin: 0;
    }
  }
}
</style>
